<template>
  <div class="pagss">
    <div style="height: 20px;"></div>
    <Navvz></Navvz>
    <el-row >


      <el-col :span="24">

        <el-row >
          <el-col :span="24">



            <div class="panel-group2">


              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="数据库配置" name="first">
                  <el-button type="primary" class="mb_10" @click="handleAdd">添加</el-button>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50">
                    </el-table-column>
                    <el-table-column prop="name" label="数据库名称">
                    </el-table-column>
                    <el-table-column prop="engine_version" label="引擎版本">
                    </el-table-column>

                    <el-table-column label="操作" width="200">
                      <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleUpdate(scope.row)">更新</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>

                  <div class="center ">
                    <pagination v-show="total>0" :total="total" :page.sync="queryParams.page"
                      :limit.sync="queryParams.pageSize" @pagination="getList" />
                  </div>
                </el-tab-pane>
                <el-tab-pane label="工具服配置" name="second">


                  <Toolcon></Toolcon>


                </el-tab-pane>
              </el-tabs>



            </div>
          </el-col>
        </el-row>


      </el-col>


    </el-row>


    <el-dialog :title="title" :visible.sync="open" width="520px" append-to-body style="margin-top: 300px;">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">

        <el-form-item label="数据库名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入数据库名称" disabled />
        </el-form-item>

        <el-form-item label="引擎版本" prop="engine_version">
          <el-select style="width: 100%;" v-model="form.engine_version" placeholder="请选择引擎版本">
            <el-option label="64 23.02 10.0" value="64 23.02 10.0"></el-option>
            <el-option label="86 63.33 126.12" value="86 63.33 126.12"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
  import CountTo from 'vue-count-to'
  import Cookies from 'js-cookie'
  import Vue from 'vue';

  import Navvz from "@/components/Navvz";

  import Sidebartss from "@/components/Sidebartss";
  import * as Database from "@/api/system/database";

  import Toolcon from "@/views/center/toolCon";



  export default {
    name: 'Index',
    components: {
      CountTo,
      Navvz,
      Sidebartss,
      Toolcon,


    },
    data() {
      return {
        activeName: 'first',
        user_id: '',
        // 总条数
        total: 0,
        // 字典表格数据
        tableData: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,

        // 查询参数
        queryParams: {
          page: 1,
          pageSize: 10
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          name: [{
            required: true,
            message: "数据库名称名称不能为空",
            trigger: "blur"
          }],
          engine_version: [{
            required: true,
            message: '请选择引擎版本',
            trigger: 'change'
          }],
        },
        loading: false,


      }
    },
    created() {
      this.user_id = localStorage.getItem('user_id')
      this.getList()

    },
    mounted() {

    },
    methods: {
      handleClick() {

      },

      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id
        Database.Show(id).then(response => {
          this.form = response.data;
          this.form.id = response.data.id;
          this.open = true;
          this.title = "修改数据库配置";

        });
      },

      /** 删除按钮操作 */
      handleDelete(row) {
        const id = row.id;
        this.$modal.confirm('是否确认删除').then(function() {
          return Database.Delete(id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },

      /** 查询数据库配置列表 */
      getList() {
        this.loading = true;
        Database.getList(this.queryParams).then(response => {
          this.tableData = response.data.rows;
          this.total = response.data.total;
          this.loading = false;


        });
      },

      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              Database.Update(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              Database.Add(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 新增按钮操作 */
      handleAdd() {
        if (this.tableData.length >= 5) {
          this.$modal.msgWarning("最多增加5个");
          return
        }
        this.reset();
        this.open = true;
        this.title = "添加数据库配置";
        if (this.tableData.length > 0) {
          var n1 = this.tableData[0]['name'];
          var n2 = n1.slice(5)
          var n3 = Number(n2) + 1;
          var name = 'Tools' + n3;
        } else {
          var name = 'Tools' + this.user_id + '1';
        }
        this.$set(this.form, 'name', name);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
    }
  }
</script>


<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
  }


  .panel-group1 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    min-height: 220px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  .panel-group2 {
    padding: 25px;
    margin-top: 18px;
    margin-bottom: 0px;
    margin-right: 15px;
    margin-left: 15px;
    height: 800px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #fff;
    background: #306EF2;
    padding-left: 20px;
  }

  ::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2),
  .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2) {
    padding-left: 20px;
  }

  ::v-deep .el-tabs--top .el-tabs__item.is-top:last-child,
  .el-tabs--top .el-tabs__item.is-bottom:last-child,
  .el-tabs--bottom .el-tabs__item.is-top:last-child,
  .el-tabs--bottom .el-tabs__item.is-bottom:last-child {
    padding-right: 20px;
  }

  ::v-deep .el-divider--vertical {
    height: 100px;
  }

  ::v-deep .pagination-container .el-pagination {

    position: relative;
  }

  .yhbox {
    padding: 20px;
    width: 320px;
    height: 120px;
    background: #FFFFFF;
    // background: red;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #BBBBBB;
  }

  ::v-deep .el-dialog__header {
    padding: 20px;
    padding-bottom: 0;
  }



  .txxbutton {
    ::v-deep .el-button--medium {
      width: 146px;
      height: 52px;
      padding: 10px 20px;
      font-size: 20px;
      border-radius: 4px;
    }
  }
</style>
